<!--复印用途模板管理-->
<script setup>

import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";

//用于保存选中项内容的变量
const selectionTemp=ref([]);
//用于分页计页的变量
const currentPage=ref(1);
//一个设置批量删除提示的变量
const ifDeleteConfirm=ref(true);
//每页条数
const pageSize=ref(10);
//用于控制表格项计数的函数
const selectionChange=(selection)=>{
  selectionTemp.value=selection;
}
//开局读取
onMounted(()=>{
  let breadcrumbData=["病案复印管理","复印用途管理"];
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumbData));
  loadTemplate();
  getPurpose();
})
//新增跳转
const addPurpose=()=>{
  router.push('/duplicate/copyingPurposes/create');
}
//修改跳转
const updatePurpose=(id)=>{
  router.push('/duplicate/copyingPurposes/create?id='+id);
}

//查询表
const searchForm=ref({
  id:'',
  purposeId:'',
  createTime:'',
  status:''
})
//复印用途的选项
const purposeOption=ref([]);
//重置查询表
const resetSearchForm=()=>{
  searchForm.value={};
  loadTemplate();
}

//获取模板
const loadTemplate=()=>{
  let data=qs.stringify(searchForm.value);
  axios.get(getBaseURL(1)+'/v1/duplicate/copy_purpose/select?'+data).then((response)=>{
    purposeTableData.value=response.data.data;
    console.log(purposeTableData.value);
  })
}
//删除复印用途模板
const deleteTemplate=(id)=>{
  if(ifDeleteConfirm.value==true) {
    if (confirm("确认删除？")) {
      axios.post(getBaseURL(1) + '/v1/duplicate/copy_purpose/delete/' + id).then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("删除模板成功");
          loadTemplate();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    }
  }
  else {
    axios.post(getBaseURL(1) + '/v1/duplicate/copy_purpose/delete/' + id).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success("删除模板成功");
        loadTemplate();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
//批量删除
const deleteTempOnCheck=()=>{
  if(confirm("确认删除选中的模板？")) {
    ifDeleteConfirm.value=false;
    for(let i=0;i<selectionTemp.value.length;i++){
      deleteTemplate(selectionTemp.value[i].id);
    }
  }
}
//获取复印用途
const getPurpose=()=>{
  let query=qs.stringify({dictType:'print_type'});
  axios.get(getBaseURL(4) + '/v1/medical/medicalSystem/selectDictDetail/?'+query).then((response)=>{
    if(response.data.code==2000){
      purposeOption.value=response.data.data;
    }
    else(ElMessage.error(response.data.msg));
  })
}

//表格数据
const purposeTableData=ref([])

//使用状态显示转换
const statusFormat=(row,column,cellValue,index)=>{
  if(cellValue=='0') cellValue='未使用';
  else if(cellValue=='1') cellValue='使用中';
  return cellValue;
}
//复印用途显示转换
const purposeFormat=(row,column,cellValue,index)=>{
  for(let item=0;item<purposeOption.value.length;item++){
    if(purposeOption.value[item].dictValue==cellValue){
      cellValue=purposeOption.value[item].dictLabel;
      return cellValue;
    }
  }
}
</script>

<template>
  <div style="background-color:#F0F2F5;padding: 0;width: 100%;height: 100%;">
    <el-card shadow="never" style="background-color:#fff;padding:20px 0;width: 90%;margin: 0 auto 20px auto;">
    <!--搜索项-->
      <el-form label-width="auto">
        <el-row :gutter="20" style="margin-bottom: 20px;padding:0 20px;text-align: center;">
          <el-col :span="8">
            <el-form-item label="复印用途">
              <el-select style="width: 200px;" placeholder="请选择" default-first-option v-model="searchForm.purposeId">
                <el-option v-for="item in purposeOption" :label="item.dictLabel" :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录时间">
              <el-date-picker style="width: 200px" placeholder="请选择" v-model="searchForm.createTime" value-format="YYYY-MM-DD"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select style="width: 200px;" placeholder="请选择" default-first-option v-model="searchForm.status">
                <el-option label="未使用" value="0"/>
                <el-option label="使用中" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="padding:0 20px;text-align: center;">
          <el-col :span="24">
            <el-button type="primary" style="float: right;margin-left: 10px;" @click="loadTemplate"><el-icon style="margin-right: 5px;"><Search/></el-icon>搜索</el-button>
            <el-button style="float: right;" @click="resetSearchForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" style="background-color:#fff;padding:20px 0;width: 1150px;margin: 0 auto;">
      <el-row :gutter="20" style="height:32px;margin-bottom: 20px;">
        <!--选中后删除模板-->
        <el-col :span="21" v-if="selectionTemp!=null">
          <div v-if="selectionTemp.length>0" type="primary" style="text-align: left;padding:0 15px;height: 100%;width:100%;border: solid 1px #2D82FF;background-color:#d9ecff;border-radius: 8px;">
            <el-text type="primary" style="line-height:32px;">已选择&nbsp;&nbsp;</el-text>
            {{selectionTemp.length}}
            <el-button type="text" style="color: red;line-height: 32px;float: right" @click="deleteTempOnCheck">删除模板</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" style="float: right;" @click="addPurpose">新增模板</el-button>
        </el-col>
      </el-row>
      <el-table :data="purposeTableData" @selection-change="selectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="复印用途" property="purposeId" :formatter="purposeFormat"/>
        <el-table-column label="复印用途推荐模板" property="recommendText" show-overflow-tooltip/>
        <el-table-column label="记录人" property="createUser"/>
        <el-table-column label="状态" property="status" :formatter="statusFormat"/>
        <el-table-column label="记录时间" property="createTime"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="updatePurpose(scope.row.id)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteTemplate(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;" layout="prev,pager,next" v-model:page-size="pageSize" :total="purposeTableData.length" v-model:current-page="currentPage"/>
    </el-card>
  </div>
</template>

<style scoped>

</style>